<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props的基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">  /*此处一定要写babel*/
      

        function Person(props) {
            const { name, age, sex } = props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{age}</li>
                    <li>年龄:{sex}</li>
                </ul>
            )
        }

        Person.propTypes = {
            //PropTypes是引入的prop-types.js提供的
            name: PropTypes.string.isRequired,//限制name必穿 且为字符串
            sex: PropTypes.string,//性别为字符串
            age: PropTypes.number,//年龄必须是数字
        }
        //指定默认标签属性值
        Person.defaultProps = {
            sex: '男',//性别默认是男
            age: 18  //年龄默认是18
        }
        //渲染组件到页面
        ReactDOM.render(<Person name="jerry"  />, document.getElementById('test'));



    </script>
</body>

</html>